<template>
  <div style="padding: 0px 100px">
    <!-- 空状态 -->
    <div
      v-if="
        form.infoCheckAddDTOList.length === 0 &&
        form.linkageInfoCheckAddDTOList.length === 0
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 8px;
        "
      >
        <div style="color: #97999c; font-weight: 400; font-size: 14px">
          <div style="display: flex; align-items: center">
            <div class="switch" style="width: 204px">
              <div
                class="switchLeft"
                style="width: 100px"
                :style="{ background: isLinkage ? '#F0F2F5' : '#FFFFFF' }"
                @click="((isLinkage = false), (verificationIndex = undefined))"
              >
                常规条件
              </div>
              <div
                class="switchRight"
                style="width: 100px"
                :style="{ background: !isLinkage ? '#F0F2F5' : '#FFFFFF' }"
                @click="((isLinkage = true), (verificationIndex = undefined))"
              >
                联动条件
              </div>
            </div>
          </div>
        </div>
        <div
          class="addButton"
          @click="
            () => {
              isLinkage
                ? form.linkageInfoCheckAddDTOList.push({
                    errorMsg: undefined,
                    type: false,
                    infoCheckGroupAddDTOList: [
                      {
                        infoCheckAddDTOList: [
                          {
                            infoCheckAddDTO: {
                              checkRule: 'result',
                              filterTypeShow: false,
                              conditionDTO: [{}],
                            },
                          },
                        ],
                      },
                    ],
                  })
                : form.infoCheckAddDTOList.push({
                    checkType: 'simple',
                    conditionDTO: [{}],
                  });
            }
          "
        >
          <div
            style="width: 12px; height: 12px; line-height: 28px; color: #2983ff"
          >
            +
          </div>
          <div
            style="
              width: 28px;
              height: 20px;
              line-height: 28px;
              font-weight: 400;
              font-size: 14px;
              color: #2983ff;
            "
          >
            新增
          </div>
        </div>
      </div>
      <div
        class="notData"
        style="padding: 200px; height: 680px; align-items: center"
      >
        <!-- <img src="@/assets/kong.png" /> -->
      </div>
    </div>
    <!-- 有数据 -->
    <div
      v-else
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
      "
    >
      <div style="color: #97999c; font-weight: 400; font-size: 14px">
        <div style="display: flex; align-items: center">
          <div class="switch" style="width: 204px">
            <div
              class="switchLeft"
              style="width: 100px"
              :style="{ background: isLinkage ? '#F0F2F5' : '#FFFFFF' }"
              @click="((isLinkage = false), (verificationIndex = undefined))"
            >
              常规条件
            </div>
            <div
              class="switchRight"
              style="width: 100px"
              :style="{ background: !isLinkage ? '#F0F2F5' : '#FFFFFF' }"
              @click="((isLinkage = true), (verificationIndex = undefined))"
            >
              联动条件
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex; align-items: center">
        <div class="switch">
          <div
            class="switchLeft"
            :style="{ background: msgType ? '#F0F2F5' : '#FFFFFF' }"
            @click="msgType = false"
          >
            简洁
          </div>
          <div
            class="switchRight"
            :style="{ background: !msgType ? '#F0F2F5' : '#FFFFFF' }"
            @click="msgType = true"
          >
            详情
          </div>
        </div>
        <div
          style="
            width: 1px;
            height: 14px;
            background: #dedfe3;
            border-radius: 1px;
            margin: 0px 12px;
          "
        ></div>
        <div
          class="addButton"
          @click="
            () => {
              isLinkage
                ? form.linkageInfoCheckAddDTOList.push({
                    errorMsg: undefined,
                    type: false,
                    infoCheckGroupAddDTOList: [
                      {
                        infoCheckAddDTOList: [
                          {
                            infoCheckAddDTO: {
                              checkRule: 'result',
                              filterTypeShow: false,
                              conditionDTO: [{}],
                            },
                          },
                        ],
                      },
                    ],
                  })
                : form.infoCheckAddDTOList.push({
                    checkType: 'simple',
                    conditionDTO: [{}],
                  });
            }
          "
        >
          <div
            style="width: 12px; height: 12px; line-height: 28px; color: #2983ff"
          >
            +
          </div>
          <div
            style="
              width: 28px;
              height: 20px;
              line-height: 28px;
              font-weight: 400;
              font-size: 14px;
              color: #2983ff;
            "
          >
            新增
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <a-form
          :label-col-props="labelCol"
          :wrapper-col-props="wrapperCol"
          :model="form"
        >
          <draggable
            v-if="isLinkage"
            v-model="form.linkageInfoCheckAddDTOList"
            item-key="id"
            handle=".drag-handle"
          >
            <div
              :class="
                msgType !== true ? 'conditionGroup' : 'conditionGroupDetails'
              "
              v-for="(item, index) in form.linkageInfoCheckAddDTOList"
              :key="index"
            >
              <div
                :style="{
                  background: msgType === true ? '#FAFBFD' : '',
                  padding: msgType === true ? '8px' : '',
                }"
                style="display: flex"
              >
                <div class="drag-handle">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shangxiatuozhuai"></use>
                  </svg>
                </div>
                <div
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                  "
                >
                  <div style="margin-bottom: 0px; display: flex">
                    {{ index + 1 }}.
                    {{ form.linkageInfoCheckAddDTOList[index]?.errorMsg }}
                  </div>
                  <div
                    style="
                      display: flex;
                      gap: 0px 9px;
                      align-items: center;
                      margin-right: 9px;
                    "
                  >
                    <svg
                      class="icon"
                      style="font-size: 11px"
                      aria-hidden="true"
                      @click="updata(item, index)"
                    >
                      <use xlink:href="#icon-a-shanchuicon_morenbeifen8"></use>
                    </svg>
                    <!-- <svg class="icon" aria-hidden="true" @click="del"> -->
                    <svg
                      class="icon"
                      aria-hidden="true"
                      @click="
                        (form.linkageInfoCheckAddDTOList.splice(index, 1),
                        linkageInfoCheckAddDTOListUpda())
                      "
                    >
                      <use xlink:href="#icon-a-shanchuicon_morenbeifen9"></use>
                    </svg>
                    <svg
                      class="icon"
                      aria-hidden="true"
                      @click="add(item, index)"
                    >
                      <use xlink:href="#icon-a-tianjiaicon_morenbeifen12"></use>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="DetailStyle" v-if="msgType" style="display: flex">
                <div
                  v-if="Object.keys(item.infoCheckGroupAddDTOList).length > 1"
                  style="cursor: pointer; width: 25px"
                  class="custom-div displayFlex"
                >
                  <div class="child-div">
                    {{ "或" }}
                  </div>
                </div>
                <div style="padding: 10px 0px 0px 0px">
                  <div
                    style="
                      margin-bottom: 10px;
                      display: flex;
                      align-items: center;
                      gap: 0px 8px;
                    "
                    v-for="(
                      value, key, rosindex
                    ) in item.infoCheckGroupAddDTOList"
                    :key="rosindex"
                  >
                    <div
                      style="
                        margin-bottom: 10px;
                        display: flex;
                        align-items: center;
                        gap: 0px 8px;
                      "
                      v-for="(
                        infoCheckAddDTOList, infoCheckAddDTOListIndex
                      ) in value.infoCheckAddDTOList"
                      :key="infoCheckAddDTOListIndex"
                    >
                      <!-- {{ infoCheckAddDTOList }} -->
                      <div
                        style="
                          height: 24px;
                          background: #f2f3f5;
                          border-radius: 4px;
                          color: #646a73;
                          font-size: 14px;
                          padding: 2px 6px;
                        "
                        v-for="(name, nameIndex) in infoCheckAddDTOList
                          .infoCheckAddDTO.conditionDTO[0].columnKey"
                        :key="nameIndex"
                      >
                        {{ name }}
                      </div>
                      <div
                        style="
                          font-size: 14px;
                          color: #54607c;
                          font-weight: 400;
                        "
                      >
                        {{
                          menuList.find(
                            (item) =>
                              infoCheckAddDTOList.infoCheckAddDTO.checkRule ===
                              item.checkRule
                          )?.title
                        }}
                      </div>

                      <div
                        v-if="
                          menuList.find(
                            (item) =>
                              infoCheckAddDTOList.infoCheckAddDTO.checkRule ===
                              item.checkRule
                          )?.checkRule === 'repeat'
                        "
                      ></div>
                      <div
                        style="display: flex; align-items: center; gap: 0px 8px"
                        v-else-if="
                          ['在...之中', '不在...之中', '在...之间'].includes(
                            conditionEnumSort[
                              infoCheckAddDTOList.infoCheckAddDTO
                                .conditionDTO[0].match
                            ]
                          )
                        "
                      >
                        <div style="color: #97999c; font-size: 14px">
                          {{
                            conditionEnumSort[
                              infoCheckAddDTOList.infoCheckAddDTO
                                .conditionDTO[0].match
                            ].split("...")[0]
                          }}
                        </div>
                        <div style="font-size: 14px; color: #515665">
                          {{
                            infoCheckAddDTOList.infoCheckAddDTO.conditionDTO[0]
                              .ruleInfo
                          }}
                        </div>
                        <div style="color: #97999c; font-size: 14px">
                          {{
                            conditionEnumSort[
                              infoCheckAddDTOList.infoCheckAddDTO
                                .conditionDTO[0].match
                            ].split("...")[1]
                          }}
                        </div>
                      </div>
                      <div
                        v-else-if="
                          menuList.find(
                            (item) =>
                              infoCheckAddDTOList.infoCheckAddDTO.checkRule ===
                              item.checkRule
                          )?.checkRule === 'data'
                        "
                        style="display: flex; align-items: center; gap: 0px 8px"
                      >
                        <!-- <div v-else-if="['data'].includes(menuList.find(item => ros.checkRule === item.checkRule)?.checkRule)" style="display:flex;align-items: center;gap: 0px 8px;"> -->
                        <div style="font-size: 14px; color: #515665">
                          关联的
                        </div>
                        <div style="color: #97999c; font-size: 14px">
                          {{
                            infoCheckAddDTOList.infoCheckAddDTO.conditionDTO[0]
                              .formData.dataSourceId
                          }}
                        </div>
                        <div style="font-size: 14px; color: #515665">
                          {{
                            conditionEnumSort[
                              infoCheckAddDTOList.infoCheckAddDTO
                                .conditionDTO[0].match
                            ]
                          }}
                        </div>
                        <div style="color: #97999c; font-size: 14px">
                          {{
                            infoCheckAddDTOList.infoCheckAddDTO.conditionDTO[0]
                              .formData.ruleInfo
                          }}
                        </div>
                      </div>
                      <div
                        style="display: flex; align-items: center; gap: 0px 8px"
                        v-else
                      >
                        <div style="color: #97999c; font-size: 14px">
                          {{
                            conditionEnumSort[
                              infoCheckAddDTOList.infoCheckAddDTO
                                .conditionDTO[0].match
                            ]
                          }}
                        </div>
                        <div
                          v-if="
                            menuList.find(
                              (item) =>
                                infoCheckAddDTOList.infoCheckAddDTO
                                  .checkRule === item.checkRule
                            )?.checkRule === 'el'
                          "
                          style="font-size: 14px; color: #515665"
                        >
                          {{
                            ros.formula
                              .map((item3) => {
                                return item3.type === "variable"
                                  ? "${" + item3.key + "}"
                                  : item3.key;
                              })
                              .join(" ")
                          }}
                        </div>
                        <div v-else style="font-size: 14px; color: #515665">
                          {{
                            infoCheckAddDTOList.infoCheckAddDTO.conditionDTO[0]
                              .ruleInfo
                          }}
                        </div>
                      </div>
                      <div
                        v-if="
                          infoCheckAddDTOListIndex !==
                          value.infoCheckAddDTOList.length - 1
                        "
                        style="
                          display: flex;
                          justify-content: center;
                          border: 1px solid #e7e9f1;
                          border-radius: 8px;
                          background: #ffffff;
                          color: #83888f;
                          font-size: 14px;
                          font-weight: 400;
                          width: 24px;
                        "
                      >
                        {{ infoCheckAddDTOList.relation ? "且" : "或" }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </draggable>
          <draggable
            v-else
            v-model="form.infoCheckAddDTOList"
            item-key="id"
            handle=".drag-handle"
          >
            <div
              :class="
                msgType !== true ? 'conditionGroup' : 'conditionGroupDetails'
              "
              v-for="(item, index) in form.infoCheckAddDTOList"
              :key="index"
            >
              <div
                :style="{
                  background: msgType === true ? '#FAFBFD' : '',
                  padding: msgType === true ? '8px' : '',
                }"
                style="display: flex"
              >
                <div class="drag-handle">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shangxiatuozhuai"></use>
                  </svg>
                </div>
                <div
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                  "
                >
                  <div style="margin-bottom: 0px; display: flex">
                    {{ index + 1 }}.
                    {{ form.infoCheckAddDTOList[index]?.errorMsg }}
                  </div>
                  <div
                    style="
                      display: flex;
                      gap: 0px 9px;
                      align-items: center;
                      margin-right: 9px;
                    "
                  >
                    <svg
                      class="icon"
                      style="font-size: 11px"
                      aria-hidden="true"
                      @click="updata(item, index)"
                    >
                      <use xlink:href="#icon-a-shanchuicon_morenbeifen8"></use>
                    </svg>
                    <!-- <svg class="icon" aria-hidden="true" @click="del"> -->
                    <svg
                      class="icon"
                      aria-hidden="true"
                      @click="
                        (form.infoCheckAddDTOList.splice(index, 1),
                        checkGroupSimpleDTOListUpda())
                      "
                    >
                      <use xlink:href="#icon-a-shanchuicon_morenbeifen9"></use>
                    </svg>
                    <svg
                      class="icon"
                      aria-hidden="true"
                      @click="add(item, index)"
                    >
                      <use xlink:href="#icon-a-tianjiaicon_morenbeifen12"></use>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="DetailStyle" v-if="msgType" style="display: flex">
                <div
                  v-if="item.conditionDTO.length > 1"
                  style="cursor: pointer; width: 25px"
                  class="custom-div displayFlex"
                >
                  <div class="child-div">
                    {{ "或" }}
                  </div>
                </div>
                <div style="padding: 10px 0px 0px 0px">
                  <div
                    style="
                      margin-bottom: 10px;
                      display: flex;
                      align-items: center;
                      gap: 0px 8px;
                    "
                    v-for="(ros, rosindex) in item.conditionDTO"
                    :key="rosindex"
                  >
                    <div
                      style="
                        height: 24px;
                        background: #f2f3f5;
                        border-radius: 4px;
                        color: #646a73;
                        font-size: 14px;
                        padding: 2px 6px;
                      "
                      v-for="(name, nameIndex) in ros.columnKey"
                      :key="nameIndex"
                    >
                      {{ name }}
                    </div>
                    <div
                      style="font-size: 14px; color: #54607c; font-weight: 400"
                    >
                      {{
                        menuList.find(
                          (item) => ros.checkRule === item.checkRule
                        )?.title
                      }}
                    </div>

                    <div
                      v-if="
                        menuList.find(
                          (item) => ros.checkRule === item.checkRule
                        )?.checkRule === 'repeat'
                      "
                    ></div>
                    <div
                      style="display: flex; align-items: center; gap: 0px 8px"
                      v-else-if="
                        ['在...之中', '不在...之中', '在...之间'].includes(
                          conditionEnumSort[ros.match]
                        )
                      "
                    >
                      <div style="color: #97999c; font-size: 14px">
                        {{ conditionEnumSort[ros.match].split("...")[0] }}
                      </div>
                      <div style="font-size: 14px; color: #515665">
                        {{ ros.ruleInfo }}
                      </div>
                      <div style="color: #97999c; font-size: 14px">
                        {{ conditionEnumSort[ros.match].split("...")[1] }}
                      </div>
                    </div>
                    <div
                      v-else-if="
                        menuList.find(
                          (item) => ros.checkRule === item.checkRule
                        )?.checkRule === 'data'
                      "
                      style="display: flex; align-items: center; gap: 0px 8px"
                    >
                      <!-- <div v-else-if="['data'].includes(menuList.find(item => ros.checkRule === item.checkRule)?.checkRule)" style="display:flex;align-items: center;gap: 0px 8px;"> -->
                      <div style="font-size: 14px; color: #515665">关联的</div>
                      <div style="color: #97999c; font-size: 14px">
                        {{ ros.formData.dataSourceId }}
                      </div>
                      <div style="font-size: 14px; color: #515665">
                        {{ conditionEnumSort[ros.match] }}
                      </div>
                      <div style="color: #97999c; font-size: 14px">
                        {{ ros.formData.ruleInfo }}
                      </div>
                    </div>
                    <div
                      style="display: flex; align-items: center; gap: 0px 8px"
                      v-else
                    >
                      <div style="color: #97999c; font-size: 14px">
                        {{ conditionEnumSort[ros.match] }}
                      </div>
                      <div
                        v-if="
                          menuList.find(
                            (item) => ros.checkRule === item.checkRule
                          )?.checkRule === 'el'
                        "
                        style="font-size: 14px; color: #515665"
                      >
                        {{
                          ros.formula
                            .map((item3) => {
                              return item3.type === "variable"
                                ? "${" + item3.key + "}"
                                : item3.key;
                            })
                            .join(" ")
                        }}
                      </div>
                      <div v-else style="font-size: 14px; color: #515665">
                        {{ ros.ruleInfo }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </draggable>
        </a-form>
      </div>
    </div>
    <a-drawer
      placement="bottom"
      :closable="false"
      v-model:visible="visible"
      :height="`90%`"
    >
      <verificationListAdd
        v-if="visible && !isLinkage"
        ref="verificationListAdd"
        @ok="conditionOk"
        @close="close"
        :infoCheckAddDTO="form.infoCheckAddDTOList[verificationIndex]"
      />
      <verificationListAddLinkage
        v-if="visible && isLinkage"
        ref="verificationListAddLinkage"
        @ok="LinkageOk"
        @close="Linkageclose"
        :linkageInfoCheckAddDTO="
          form.linkageInfoCheckAddDTOList[verificationIndex]
        "
      />
      <!-- :infoCheckAddDTO="form.infoCheckAddDTOList[verificationIndex]" -->
    </a-drawer>
  </div>
</template>

<script>
// import { nanoid } from 'nanoid'
import draggable from "vuedraggable";
import verificationListAdd from "@/components/Form/verification/verificationListAdd.vue";
import verificationListAddLinkage from "@/components/Form/verification/verificationListAddLinkage.vue";

import { menuList } from "@/components/Form/base/options";
export default {
  name: "VerificationList",
  components: {
    draggable,
    verificationListAdd,
    verificationListAddLinkage,
  },
  inject: ["dataObj"],
  data() {
    return {
      visible: false,
      msgType: false,
      isLinkage: false,
      verificationIndex: undefined,
      form: {
        infoCheckAddDTOList: [],
        linkageInfoCheckAddDTOList: [], // 关联用这个
      },
      menuList: menuList,
      conditionEnumSort: {},
      conditionEnum: {
        等于: "eq",
        小于: "lt",
        大于: "gt",
        小于等于: "lte",
        大于等于: "gte",
        "在...之中": "in",
        "不在...之中": "nin",
        "在...之间": "in",
        "不在...之间": "nin",
        不等于: "ne",
        // '正则': 'regex',
        // '大小': 'size',
        // '所有都满足': 'all',
        // '存在': 'exists',
        // '字段类型': 'type',
        // '空': 'null',
        // '非空': 'notNull',
        模糊匹配: "like",
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
  },
  mounted() {
    this.conditionEnumSort = Object.entries(this.conditionEnum).reduce(
      (acc, [key, value]) => {
        acc[value] = key; // 交换 key 和 value
        return acc;
      },
      {}
    );
    if (
      this.dataObj.tableDesc.checkGroupSimpleDTOList &&
      this.dataObj.tableDesc.checkGroupSimpleDTOList.length > 0
    ) {
      this.revertToInfoCheckAddDTOList();
    } else {
      this.form.infoCheckAddDTOList = [];
    }

    if (
      this.dataObj.tableDesc.checkGroupLinkageDTOList &&
      this.dataObj.tableDesc.checkGroupLinkageDTOList.length > 0
    ) {
      this.revertlinkageInfoCheckAddDTOList();
    } else {
      this.form.linkageInfoCheckAddDTOList = [];
    }
  },
  methods: {
    updata(item, index) {
      // 编辑按钮
      this.verificationIndex = index;
      this.visible = true;
    },
    del() {
      // 删除
    },
    add(item, index) {
      // 添加
      this.verificationIndex = index;
      this.visible = true;
      // this.$refs.verificationListAdd.open(item, index)
    },
    conditionOk(value) {
      // 保存条件回调
      this.checkGroupSimpleDTOListUpda();
      this.visible = false;
    },
    close() {
      this.visible = false;
    },
    dataConversion(queryGroupReqDTOList) {
      // 清洗数据
      if (!Array.isArray(queryGroupReqDTOList)) {
        return queryGroupReqDTOList;
      }
      const queryParam = {};
      // eslint-disable-next-line no-unused-expressions
      queryGroupReqDTOList?.forEach((conditionGroupitem) => {
        // 数据源查询项
        // 使用 find 查找匹配的项
        // eslint-disable-next-line no-unused-expressions
        conditionGroupitem.tableQueryGroupAddDTOList?.forEach(
          (conditionitem) => {
            if (!queryParam[conditionitem.groupId]) {
              queryParam[conditionitem.groupId] = {};
            }
            if (conditionitem.between && conditionitem.between.length > 0) {
              conditionitem.between.forEach((between) => {
                queryParam[conditionitem.groupId][between.queryKey] =
                  between.value || "";
              });
            } else {
              queryParam[conditionitem.groupId][conditionitem.queryKey] =
                conditionitem.isChoose === "true"
                  ? "${" + conditionitem.dataIndex + "}"
                  : conditionitem.dataIndex || "";
              // queryParam[conditionitem.groupId][conditionitem.queryKey] = conditionitem.value || ''
            }
          }
        );
      });
      return queryParam;
    },
    async checkGroupSimpleDTOListUpda() {
      const prame = this.form.infoCheckAddDTOList.map((item, index) => {
        // 处理每一项，构建 checkGroupAddDTO
        const checkGroupAddDTO = {
          checkType: item.checkType, // 类型'simple',
          errorMsg: item.errorMsg, // 名称
          formId: "", // 表单id
          index: index, // 排序
          msgType: this.msgType,
          type: item.type ?? false,
          relation: "and",
        };
        // 处理 infoCheckAddDTOList 内的每项，按不同规则生成数据
        const infoCheckAddDTOList = item.conditionDTO.map((item2) => {
          if (item.checkRule === "el") {
            // 公式计算
            return this.processFormula(item, item2);
            // } else if (item.checkRule === 'data') { // 数据源
          } else if (item.checkRule === "data") {
            // 数据源
            return this.processDataSource(item, item2);
          } else {
            return this.processOtherCases(item, item2);
          }
        });
        return {
          checkGroupAddDTO,
          infoCheckAddDTOList,
        };
      });
      this.dataObj.tableDesc.checkGroupSimpleDTOList = prame;
    },
    // 公式计算处理函数
    processFormula(item, item2) {
      const ruleInfo = item2.formula
        .map((item3) => {
          return item3.type === "variable" ? "${" + item3.key + "}" : item3.key;
        })
        .join(" ");

      return {
        checkRule: item.checkRule,
        columnKey: item2.columnKey.join(","), // 使用逗号拼接,
        match: item2.match,
        ruleInfo,
      };
    },
    // 关联数据源处理函数
    processDataSource(item, item2) {
      return {
        checkRule: item.checkRule,
        columnKey: item2.columnKey.join(","),
        match: item2.match,
        dataId: item2.formData.dataSourceId,
        dataParam: JSON.stringify(
          this.dataConversion(item2.formData.queryGroupReqDTOList)
        ),
        ruleInfo: item2.formData.ruleInfo,
      };
    },
    // 其他处理情况
    processOtherCases(item, item2) {
      if (["in", "nin"].includes(item2.match)) {
        // if (item.checkRule !== 'result' && ['in', 'nin'].includes(item2.match)) {
        // if (item2.match === 'between') {
        let Minimum, Maximum;
        // 不为数据结果 且 为 in || nin   moment().toISOString()
        if (
          item.checkRule !== "result" &&
          item.checkRule === "timeRange" &&
          typeof item.checkRule !== "string"
        ) {
          Minimum = item2.Minimum.toISOString();
          Maximum = item2.Maximum.toISOString();
        } else {
          Minimum = item2.Minimum;
          Maximum = item2.Maximum;
        }
        // console.log()
        return {
          checkRule: item.checkRule,
          columnKey: item2.columnKey.join(","),
          match: item2.match,
          ruleInfo: Minimum + "~" + Maximum,
        };
      } else {
        return {
          checkRule: item.checkRule,
          columnKey: item2.columnKey.join(","),
          match: item2.match,
          ruleInfo:
            item2.spaceType === "select"
              ? "${" + item2.ruleInfo + "}"
              : item2.ruleInfo,
        };
      }
    },
    async revertToInfoCheckAddDTOList() {
      const prame = this.dataObj.tableDesc.checkGroupSimpleDTOList.map(
        (item) => {
          const infoCheckAddDTO = {
            checkType: item.checkGroupAddDTO.checkType ?? "simple", // 类型'simple',
            errorMsg: item.checkGroupAddDTO.errorMsg, // 名称
            formId: item.checkGroupAddDTO.formId, // 表单id
            index: item.checkGroupAddDTO.index, // 排序
            msgType: item.checkGroupAddDTO.msgType,
            type: item.checkGroupAddDTO.type ?? false,
            checkRule: item.infoCheckAddDTOList[0].checkRule, // 验证类型
            relation: "and",
          };
          // 还原 infoCheckAddDTOList 内的每项，按不同规则处理数据
          const conditionDTO = item.infoCheckAddDTOList.map((item2) => {
            if (item2.checkRule === "el") {
              // 公式计算
              return this.revertFormula(item2);
            } else if (item2.checkRule === "data") {
              // 数据源
              return this.revertDataSource(item2);
            } else {
              return this.revertOtherCases(item2);
            }
          });

          return {
            ...infoCheckAddDTO,
            conditionDTO,
          };
        }
      );
      this.form.infoCheckAddDTOList = prame;
    },

    // 公式计算还原函数
    revertFormula(item2) {
      return {
        checkRule: item2.checkRule,
        columnKey: item2.columnKey.split(","),
        match: item2.match,
        formula: item2.ruleInfo.split(" ").map((char, index) => {
          // 假设公式字符串是以 `${key}` 格式存储的，可以通过正则表达式还原
          let type = "constant";
          let value = char;
          if (["?", ":", "="].includes(char)) {
            type = "LogicalOperations";
          } else if (["+", "-", "×", "÷", "(", ")", "<", ">"].includes(char)) {
            type = "NumericOperators";
          } else {
            const regex = /\$\{.*?\}/;
            const isVariable = regex.test(char);
            if (isVariable) {
              console.log(char, "charchar");
              type = "variable";
              value = char.slice(2, -1);
            }
          }
          return {
            type: type,
            key: value,
          };
        }),
      };
    },
    // 关联数据源还原函数
    revertDataSource(item2) {
      const queryGroupReqDTOList = JSON.parse(item2.dataParam);
      return {
        checkRule: item2.checkRule,
        columnKey: item2.columnKey.split(","),
        match: item2.match,
        formData: {
          dataSourceId: item2.dataId,
          queryGroupReqDTOList: queryGroupReqDTOList,
          // ruleInfo: item2.ruleInfo.split(',')
          ruleInfo: item2.ruleInfo,
        },
      };
    },

    // 其他情况还原函数
    revertOtherCases(item2) {
      // if (item2.match === 'between') {
      if (["in", "nin"].includes(item2.match)) {
        // if (item2.checkRule !== 'result' && ['in', 'nin'].includes(item2.match)) {
        const [min, max] = item2.ruleInfo.split("~");
        return {
          checkRule: item2.checkRule,
          columnKey: item2.columnKey.split(","),
          match: item2.match,
          Minimum: min,
          Maximum: max,
        };
      } else {
        // let spaceType = 'input'
        // let ruleInfo = item2.ruleInfo
        // const regex = /\$\{.*?\}/
        // const isVariable = regex.test(item2.ruleInfo)
        // if (isVariable) {
        //   spaceType = 'select'
        //   ruleInfo = item2.ruleInfo.slice(2, -1)
        // }
        let spaceType = "input";
        const ruleInfo = item2.ruleInfo;
        const regex = /\$\{.*?\}/;
        const isVariable = regex.test(item2.ruleInfo);
        if (!isVariable) {
          spaceType = "select";
        }
        return {
          checkRule: item2.checkRule,
          columnKey: item2.columnKey.split(","),
          // match: item2.match,
          match:
            item2.checkRule === "repeat" && (!item2.match || item2.match === "")
              ? "repeat"
              : item2.match,
          spaceType: spaceType,
          ruleInfo: ruleInfo,
        };
      }
    },
    LinkageOk(value) {
      // 保存联动条件回调
      this.linkageInfoCheckAddDTOListUpda();
      this.visible = false;
    },
    Linkageclose() {
      this.visible = false;
    },
    async linkageInfoCheckAddDTOListUpda() {
      const prame = this.form.linkageInfoCheckAddDTOList.map((item, index) => {
        // 处理每一项，构建 checkGroupAddDTO
        const Grouprelation = [];
        const checkGroupAddDTO = {
          errorMsg: item.errorMsg, // 名称
          formId: "", // 表单id
          index: index, // 排序
          msgType: this.msgType,
          type: item.type ?? false,
        };
        const linkageInfoCheckAddDTOMap = {};
        item.infoCheckGroupAddDTOList.map((item2, index2) => {
          Grouprelation.push(item2.relation ? "and" : "or");
          const conditionDTOList = [];
          item2.infoCheckAddDTOList.map((item3, index3) => {
            // 条的组
            item3.infoCheckAddDTO.conditionDTO.map((item4) => {
              let conditionDTO = {};
              if (item4.checkRule === "el") {
                // 公式计算
                conditionDTO = this.processFormula(
                  item3.infoCheckAddDTO,
                  item4
                );
              } else if (item4.checkRule === "data") {
                // 数据源
                conditionDTO = this.processDataSource(
                  item3.infoCheckAddDTO,
                  item4
                );
              } else {
                conditionDTO = this.processOtherCases(
                  item3.infoCheckAddDTO,
                  item4
                );
              }
              conditionDTO["groupId"] = index3;
              conditionDTO["nextRelation"] = item3.relation ? "and" : "or";
              conditionDTOList.push(conditionDTO);
            });
          });
          linkageInfoCheckAddDTOMap[index2] = conditionDTOList;
        });
        checkGroupAddDTO["relation"] = "or";
        return {
          checkGroupAddDTO,
          linkageInfoCheckAddDTOMap,
        };
      });
      this.dataObj.tableDesc.checkGroupLinkageDTOList = prame;
    },
    async revertlinkageInfoCheckAddDTOList() {
      const prame = this.dataObj.tableDesc.checkGroupLinkageDTOList.map(
        (item) => {
          const infoCheckAddDTO = {
            errorMsg: item.checkGroupAddDTO.errorMsg, // 名称
            formId: item.checkGroupAddDTO.formId, // 表单id
            index: item.checkGroupAddDTO.index, // 排序
            msgType: item.checkGroupAddDTO.msgType,
            type: item.checkGroupAddDTO.type ?? false,
            relation: item.checkGroupAddDTO.relation,
          };
          const infoCheckGroupAddDTOList = [];
          for (const key in item.linkageInfoCheckAddDTOMap) {
            const value = item.linkageInfoCheckAddDTOMap[key];
            const infoCheckAddDTOList = value.map((item2, index2) => {
              const conditionDTO = [item2].map((item3) => {
                if (item3.checkRule === "el") {
                  // 公式计算
                  return this.revertFormula(item3);
                } else if (item3.checkRule === "data") {
                  // 数据源
                  return this.revertDataSource(item3);
                } else {
                  return this.revertOtherCases(item3);
                }
              });
              return {
                infoCheckAddDTO: {
                  checkRule: item2.checkRule,
                  filterTypeShow: false,
                  conditionDTO: conditionDTO,
                },
                relation: item2.nextRelation !== "or",
              };
            });
            infoCheckGroupAddDTOList.push({
              infoCheckAddDTOList: infoCheckAddDTOList,
              relation: false,
            });
          }
          infoCheckAddDTO["infoCheckGroupAddDTOList"] =
            infoCheckGroupAddDTOList;
          return infoCheckAddDTO;
        }
      );
      this.form.linkageInfoCheckAddDTOList = prame;
    },
  },
};
</script>

<style lang="less" scoped>
.addButton {
  width: 70px;
  height: 30px;
  cursor: pointer;
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #2983ff;
  display: flex;
  align-content: center;
  justify-content: space-evenly;
}

.conditionList {
  display: flex;
  align-content: center;
  // justify-content: space-evenly;
  width: 100%;
  flex-wrap: wrap;
  height: 30px;
  padding: 0px 77px;
  background: #f7f8fa;
  border-radius: 6px;
}

.conditionGroup {
  background: #fafbfd;
  border-radius: 8px;
  padding: 8px;
  margin: 14px 0px;
  font-size: 14px;
  font-weight: 400;
  color: #222b3c;
}

.conditionGroupDetails {
  // background: #FAFBFD;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  // padding:8px;
  margin: 14px 0px;
  font-size: 14px;
  font-weight: 400;
  color: #222b3c;
}

.DetailStyle {
  padding: 12px 28px;
}

/deep/ .custom-select .arco-select-view {
  border-radius: 16px !important; /* 设置圆角半径 */
  background: #f1f7ff !important;
  border: 1px solid #d8e8fd !important;
}

/deep/ .custom-select .arco-select-view:hover {
  background: #ffffff !important;
  border: 1px solid #1890ff !important;
}

.child-div {
  width: 25px;
  height: 25px;
  line-height: 13px;
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: -13px; /* 左边线 */
  transform: translateY(-50%); /* 垂直居中调整 */
  padding: 5px; /* 子元素内边距 */
  background-color: #ffffff; /* 子元素背景色 */
  border: 1px solid #bfbfbf;
  border-radius: 7px;
  font-weight: 500;
  // cursor: pointer;
}

.drag-handle {
  display: flex;
  align-content: left;
  align-items: center;
  margin-right: 4px;
}

.icon {
  font-size: 12px;
  color: #646a73;
  cursor: pointer;
}

.icon:hover {
  color: #2983ff; /* 悬停后的颜色 */
}

.delIcon {
  line-height: 34px;
  cursor: pointer;
  color: #97999c;
  font-size: 12px;
}

.delIcon:hover {
  color: red; /* 悬停后的颜色 */
}

.addIcon {
  line-height: 33px;
  cursor: pointer;
  color: #97999c;
  font-size: 12px;
}

.addIcon:hover {
  color: #2983ff; /* 悬停后的颜色 */
}

.switch {
  display: flex;
  width: 88px;
  border-radius: 16px;
  background: #f0f2f5;
  cursor: pointer;
}

.switchLeft {
  width: 44px;
  height: 26px;
  border-radius: 16px;
  background: #ffffff;
  margin: 2px 0px 2px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switchRight {
  width: 44px;
  height: 26px;
  border-radius: 16px;
  margin: 2px 2px 2px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notData {
  background-color: #ffffff;
  border-radius: 5px;
  display: flex; /* 激活 flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 10px;
  height: 100%; /* 父容器高度，可根据实际情况调整 */
}

.notData img {
  max-width: 30%; /* 防止图片超出容器 */
  max-height: 30%; /* 限制图片最大高度 */
}

.custom-div {
  border-left: 1px solid #bfbfbf; /* 左侧边框 */
  border-top: 1px solid #bfbfbf; /* 上侧边框 */
  border-bottom: 1px solid #bfbfbf; /* 下侧边框 */
  border-top-left-radius: 15px; /* 左上角圆角 */
  border-bottom-left-radius: 15px; /* 左下角圆角 */
  // width:30px;
  margin: 20px 0px 20px 16px;
  position: relative; /* 设置父元素为相对定位，使子元素可以绝对定位 */
}

.displayFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
